<template>
  <ContentBase>
      <div class="row">
        <div class="col-3">
          <UserProfileInfo @follow="follow" @unfollow="unfollow" :user="user" />
          <UserProfileWrite v-if="is_me" @post_a_post="post_a_post" />
        </div>
        <div class="col-9">
          <UserProfilePosts :user="user" :posts="posts" @delete_a_post="delete_a_post" @update_a_post="update_a_post" />
        </div>
      </div>
  </ContentBase>
</template>

<script>
import ContentBase from '../components/ContentBase'
import UserProfileInfo from '../components/UserProfileInfo';
import UserProfilePosts from '../components/UserProfilePosts';
import UserProfileWrite from '../components/UserProfileWrite';
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import $ from 'jquery';
import { useStore } from 'vuex';
import { computed } from 'vue';

export default {
  name: 'UserList',
  components: {
      ContentBase,
      UserProfileInfo,
      UserProfilePosts,
      UserProfileWrite
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const userId = parseInt(route.params.userId);
    const user = reactive({});
    const posts = reactive({});

    $.ajax({
      url: "http://127.0.0.1:3005/user/getinfo/",
      type: "GET",
      data: {
        my_id: store.state.user.id,
        user_id: userId,
      },
      headers: {
        Authorization: "Bearer " + store.state.user.token, 
      },
      success(resp) {
        console.log(resp);
        user.id = resp.id;
        user.username = resp.username;
        user.photo = resp.photo;
        user.followerCount = resp.followerCount;
        if(resp.is_followed === "true") {
          user.is_followed = true;
        }else if(resp.is_followed === "false") {
          user.is_followed = false;
        }
      }
    });

    $.ajax({
      url: "http://127.0.0.1:3005/myspace/getpost/",
      type: "GET",
      data: {
        user_id: userId,
      },
      headers: {
        'Authorization': "Bearer " + store.state.user.token,
      },
      success(resp) {
        // console.log(resp);
        posts.count = resp.length;
        posts.posts = [];
        for(let i = 0; i < resp.length; i++) {
          posts.posts.push({
            idx: i + 1,
            id: resp[i].id,
            user_id:resp[i].userId,
            content: resp[i].content,
          })
        }
        console.log(posts.posts);
      }
    });

    const follow = () => {
      if (user.is_followed) return;
      user.is_followed = true;
      user.followerCount ++ ;
    };

    const unfollow = () => {
      if (!user.is_followed) return;
      user.is_followed = false;
      user.followerCount -- ;
    };

    const post_a_post = msg => {
      const parts = msg.split('+');
      // console.log(parts);
      posts.count ++ ;
      posts.posts.unshift({
        idx: posts.count,
        id: parseInt(parts[1]),
        user_id: parseInt(store.state.user.id),
        content: parts[0],
      })

      // console.log(posts.posts);
    };

    const delete_a_post = (post_id, post_idx) => {
      console.log(post_id, post_idx);
      posts.posts = posts.posts.filter(post => post.idx !== post_idx);
      posts.count = posts.posts.length;
    }
    
    const update_a_post = () => {
          $.ajax({
          url: "http://127.0.0.1:3005/myspace/getpost/",
          type: "GET",
          data: {
            user_id: userId,
          },
          headers: {
            'Authorization': "Bearer " + store.state.user.token,
          },
          success(resp) {
            // console.log(resp);
            posts.count = resp.length;
            posts.posts = [];
            for(let i = 0; i < resp.length; i++) {
              posts.posts.push({
                idx: i + 1,
                id: resp[i].id,
                user_id:resp[i].userId,
                content: resp[i].content,
              })
            }
            console.log(posts.posts);
          }
        });
    }
    
    const is_me = computed(() => userId === parseInt(store.state.user.id));

    return {
      user,
      follow,
      unfollow,
      posts,
      post_a_post,
      delete_a_post,
      is_me,
      update_a_post
    }
  }
}
</script>

<style scoped>
</style>